// 楼层快速链接组件

const component_fast_link = `
<div>
    <div class="narrow_link border-editable" @click="setLeftLeftLinks">
        <el-link v-for="item in linkForm.linkArray" :key="item.link">{{item.displayName}}</el-link>
        <el-link v-if="!(linkForm.linkArray.length)" v-for="item in 6" :key="'demo_linkitem' + item">跳转链接</el-link>
    </div>

    <!-- 选择左左链接弹窗 -->
    <el-dialog title="设置楼层链接" top="25vh" :visible.sync="dialogVisible" width="27%" :modal-append-to-body="false">
        <el-form inline size="small" :model="linkForm" ref="left_left_links_form">
            <div v-for="(link, index) in linkForm.linkArray" :key="index">
                <el-form-item label="展示名称" :prop="'linkArray.' + index + '.displayName'" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
                    <el-input v-model="link.displayName" placeholder="最多四个字" :maxlength="4" clearable />
                </el-form-item>
                <el-form-item label="跳转链接" :prop="'linkArray.' + index + '.url'" :rules="[{ required: true, message: '跳转地址不能为空', trigger: 'blur' }]">
                    <el-input v-model=" link.url" placeholder="商城链接" clearable />
                </el-form-item>
                <el-form-item style="margin-left:20px">
                    <el-button size="mini" type="danger" @click.prevent="removeLeftLeftLink(link)">清除</el-button>
                </el-form-item>
            </div>
        </el-form>

        <el-button @click="addLeftLeftLink" size="small">添加链接</el-button>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="resetLeftLeftLinkForm" size="small" plain="">重 置</el-button>
            <el-button type="primary" @click="submitLeftLeftLinkForm" size="small">确 定</el-button>
        </span>
    </el-dialog>
</div>
`;

Vue.component("fast-link", {
  props: {
    flinks: {
      type: Array,
      required: true,
    },
  },
  data: function () {
    return {
      linkForm: {
        linkArray: [],
      },
      dialogVisible: false,
    };
  },
  create: function () { },
  methods: {
    setLeftLeftLinks() {
      this.dialogVisible = true;
    },
    removeLeftLeftLink(link) {
      const index = this.linkForm.linkArray.indexOf(link);
      if (index !== -1) {
        this.linkForm.linkArray.splice(index, 1);
      }
      this.$emit("change", this.linkForm.linkArray);
    },
    resetLeftLeftLinkForm() {
      this.$refs["left_left_links_form"].resetFields();
      this.$emit("change", this.linkForm.linkArray);
    },
    submitLeftLeftLinkForm() {
      this.$refs["left_left_links_form"].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
        } else {
          return false;
        }
      });
      this.$emit("change", this.linkForm.linkArray);
    },
    addLeftLeftLink() {
      this.linkForm.linkArray.push({ displayName: "", url: "" });
      this.$emit("change", this.linkForm.linkArray);
    },
  },
  watch: {
    flinks: function (curr) {
      this.linkForm.linkArray = curr || [];
    },
  },
  template: component_fast_link,
});
